<template>
  <div class="allviedeo-box">
    <Swiper>
      <template #swiper>
        <SwiperItem v-for="swiper in bannerList" :key="swiper.banner_id">
          <img :src="swiper.baner_pic_url" :alt="swiper.banner_name" />
        </SwiperItem>
      </template>

    </Swiper>

    <div class="allvideo-info-box">
      <div class="hot-video">
        <div class="hot-video-title">
          <div class="title-left">
            <p class="title">热门</p>
            <span class="title-more"
              >更多<i class="iconfont icon-youjiantou"></i
            ></span>
          </div>
          <div class="title-right" @click="handerReplce"><i class="iconfont icon-shuaxin1" style="padding-right:5px"></i>换一换</div>
        </div>
        <div class="hot-video-info">
          <div class="all-hot-video">
            <VideoBox v-for="data in hotList" :key="data.video_id" :data="data"></VideoBox>
          </div>
        </div>
      </div>
      <div class="recommend-video">
        <div class="recommend-video-title">
          <div class="title-left">
            <p class="title">推荐视频</p>
            <!-- <span class="title-more"
              >更多<i class="iconfont icon-youjiantou"></i
            ></span> -->
          </div>
          <!-- <div class="title-right">换一换</div> -->
        </div>
        <div class="recommend-video-info">
          <div class="all-recommend-video" >
              <VideoBox v-for="data in recommendList" :key="data.video_id" :data="data"></VideoBox>
          </div>
          <div class="box">
            <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from '@/components/swiper/swiperView.vue'
import SwiperItem from '@/components/swiper/swiperItem.vue'
import VideoBox from '@/components/video/videoBox.vue'
import http from '@/util/http'
import Loading from '@/components/utilView/loadingView.vue'
import scroll from '@/util/scroll'
export default {
  components: {
    Swiper,
    SwiperItem,
    VideoBox,
    Loading
  },
  data () {
    return {
      recommendList: [], // 推荐视频列表
      offset: 3, // 每次获取热门数据的条数
      rePage: 1, // 推荐视频的页码
      hotList: [], // 热门视频列表
      hotPage: 1, // 热门视频的页码
      bannerList: [], // 轮播图
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示
    }
  },
  mounted () {
    this.getNowWidth()
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    // 获取推荐视频的数据
    http.getrecommend(this.rePage).then(res => {
      console.log(res.data.recommendList)
      this.recommendList = res.data.recommendList
      // 判断是否还有足够数据
      if (res.data.recommendList.length < 10) {
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
      }
      this.rePage++
    })

    // 获取轮播图数据u
    http.getbannerList().then(res => {
      console.log(res.data.bannerList)
      this.bannerList = res.data.bannerList
    })
  },
  methods: {
    // 热门推荐换一换
    handerReplce () {
      // 获取热门视频
      http.gethotTv(this.hotPage, this.offset).then(res => {
        console.log(res.data.hotList)
        this.hotList = res.data.hotList
        if (this.hotPage <= 4) {
          this.hotPage++
        } else {
          this.hotPage = 1
        }
        console.log(this.hotPage)
      })
    },
    // 获取当前屏幕的高度
    async getNowWidth () {
      const nowWidth = await scroll.getClientWidth()

      if (nowWidth <= 768) {
        this.offset = 2
      } else {
        this.offset = 3
      }
      // 获取热门视频
      http.gethotTv(this.hotPage, this.offset).then(res => {
        console.log(res.data.hotList)
        this.hotList = res.data.hotList
        this.hotPage++
      })
    },
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.getrecommend(this.rePage).then((res) => {
              this.recommendList = this.recommendList.concat(res.data.recommendList)
              console.log(this.recommendList)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.recommendList.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.rePage++
            })
          }
        }
      }
    }
  },

  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
    console.log('结束滚动')
  }
}
</script>

<style lang="scss" scoped>
.allviedeo-box {
  width: 100%;

  .allvideo-info-box {
    width: 100%;

    .hot-video,
    .recommend-video {
      width: 100%;

      .hot-video-title,
      .recommend-video-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 20px;

        .title-left {
          display: flex;
          align-items: flex-end;
          margin-left: 10px;

          .title {
            font-weight: 600;
            font-size: 24px;
            color: #333;
            padding-right: 15px;
          }
          .title-more {
            font-size: 14px;
            color: #939393;
            cursor: pointer;
          }
        }
        .title-right {
          font-size: 14px;
          color: #939393;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .hot-video-info,
      .recommend-video-info {
        width: 100%;

        .all-hot-video,
        .all-recommend-video {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

        }
      }
    }
    @media screen and (max-width: 540px) {
      .hot-video,
    .recommend-video {
      width: 100%;

      .hot-video-title,
      .recommend-video-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 20px;

        .title-left {
          display: flex;
          align-items: flex-end;
          margin-left: 10px;

          .title {
            font-weight: 600;
            font-size: .5rem;
            color: #333;
            padding-right: 15px;
          }
          .title-more {
            font-size: .3rem;
            color: #939393;
            cursor: pointer;
          }
        }
        .title-right {
          font-size: .3rem;
          color: #939393;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .hot-video-info,
      .recommend-video-info {
        width: 100%;

        .all-hot-video,
        .all-recommend-video {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

        }
      }
    }
    }
  }
}
</style>
